<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ 'plugins.manage.information' | translate }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
    ></button>
  </div>
  <div class="modal-body text-center">
    <img [src]="plugin.icon" (error)="handleIconError()" alt="Plugin Icon" class="mb-3 plugin-icon-card" />
    <h4 class="mb-1">{{ plugin.displayName }}</h4>
    <p class="grey-text mb-0 font-monospace">{{ plugin.name }}</p>
    <p class="grey-text mb-1 font-monospace">&#64;{{ plugin.author }}</p>
    <p class="mb-3">{{ plugin.description }}</p>
    <i
      class="fas fa-shield-alt mb-3"
      style="font-size: 48px"
      [ngClass]="{ 'orange-text': !plugin.verifiedPlugin && !plugin.verifiedPlusPlugin, 'grey-text': plugin.verifiedPlugin || plugin.verifiedPlusPlugin }"
      [ngStyle]="{ 'opacity': !plugin.verifiedPlugin && !plugin.verifiedPlusPlugin ? 1 : 0.25 }"
    ></i>
    <i
      class="fas fa-shield-alt mb-3"
      style="font-size: 48px"
      [ngClass]="{ 'green-text': !plugin.isHbScoped && (plugin.verifiedPlugin || plugin.verifiedPlusPlugin), 'grey-text': plugin.isHbScoped || (!plugin.verifiedPlugin && !plugin.verifiedPlusPlugin) }"
      [ngStyle]="{ 'opacity': !plugin.isHbScoped && (plugin.verifiedPlugin || plugin.verifiedPlusPlugin) ? 1 : 0.25 }"
    ></i>
    <i
      class="fas fa-shield-alt mb-3"
      style="font-size: 48px"
      [ngClass]="{ 'purple-text': plugin.isHbScoped, 'grey-text': !plugin.isHbScoped }"
      [ngStyle]="{ 'opacity': plugin.isHbScoped ? 1 : 0.25 }"
    ></i>
    @if (plugin.isHbScoped) {
    <h6 class="mb-2">{{ 'plugins.manage.scoped_subtitle' | translate }}</h6>
    <p class="mb-1 grey-text">{{ 'plugins.manage.scoped_message' | translate }}</p>
    <p class="mb-1 grey-text">{{ 'plugins.manage.verified_message' | translate }}</p>
    } @if (!plugin.isHbScoped && (plugin.verifiedPlugin || plugin.verifiedPlusPlugin)) {
    <h6 class="mb-2">{{ 'plugins.manage.verified_subtitle' | translate }}</h6>
    <p class="mb-1 grey-text">{{ 'plugins.manage.verified_message' | translate }}</p>
    } @if (!plugin.verifiedPlugin && !plugin.verifiedPlusPlugin) {
    <h6 class="mb-2">{{ 'plugins.manage.unverified_subtitle' | translate }}</h6>
    <p class="mb-1 grey-text">{{ 'plugins.manage.unverified_message' | translate }}</p>
    }
    <p
      class="mb-0 grey-text"
      [innerHTML]="'plugins.manage.more_info' | translate: { scopedLink: linkScoped, verifiedLink: linkVerified }"
    ></p>
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start">
      @if (plugin.links.homepage || plugin.links.npm) {
      <button type="button" class="btn btn-elegant" data-bs-dismiss="modal" (click)="dismissModal()">
        {{ 'form.button_close' | translate }}
      </button>
      }
    </div>
    <div class="text-center">
      @if (!plugin.links.homepage && !plugin.links.npm) {
      <button type="button" class="btn btn-elegant" data-bs-dismiss="modal" (click)="dismissModal()">
        {{ 'form.button_close' | translate }}
      </button>
      }
    </div>
    <div class="text-end">
      @if (plugin.links.homepage || plugin.links.npm) {
      <a
        class="btn btn-primary text-decoration-none"
        target="_blank"
        [href]="plugin.links.homepage || plugin.links.npm"
        rel="noopener noreferrer"
      >
        {{ 'plugins.button_homepage' | translate }} <i class="fas fa-external-link-alt"></i>
      </a>
      }
    </div>
  </div>
</div>
